<template>
  <view class="hot-play-detail-box">
    <view class="" :style="{background: detail.playlist.background || 'rgb(32%, 37%, 64%)'}">
      <view class="pad-0-20">
				<!-- #ifdef APP -->
				<uni-nav-bar :border="false" color="#222" backgroundColor="transparent" title="" />
				<!-- #endif -->
        <uni-nav-bar :border="false" color="#fff" backgroundColor="transparent" left-icon="left" leftText="" title=""
          @clickLeft="clickLeft" right-icon="share-fff" @clickRight="clickRight">
        </uni-nav-bar>
        <view class="title-box">
          <view class="">
            <view class="font-24 col-fff font-600">
              {{detail.playlist.title}}
            </view>
            <view class="m-t-8 font-14 col-f-4">
              {{detail.patterns.length}}
              <!-- 个图案 -->
              {{$t('manage.patterns')}}

            </view>
          </view>
          <!-- <view class="right-img">
            <image class="img-100" src="/static/images/play-ico-1.png" mode="widthFix"></image>
          </view> -->
        </view>
      </view>
    </view>
    <view class="pad-0-20">
      <view class="btn-box">
        <view class="left flex-center-center" @click="playAll">
          <image class="img" src="/static/svg/play.svg" mode="widthFix"></image>
          <view class="col-fff font-14 font-500">
            <!-- 播放全部 -->
            {{$t('manage.playAll')}}
          </view>
        </view>
        <view class="right shadow flex-center-center" @click="playAdd()">
          <uni-icons type="plusempty" size="20"></uni-icons>
        </view>
      </view>
      <view class="list-box">
        <view class="item shadow" v-for="(item, index) in detail.patterns" :key="index" @click="doDetail(item)">
          <view class="left">
            <image class="img" :src="item.preview_image" mode="aspectFill"></image>
            <!-- <view class="img" :style="{ background: item.color }"></view> -->
            <view class="">
              <view class="font-16 font-500 col-000-8">
                {{ item.pattern_name }}
              </view>
              <view class="num font-11 col-000-4">
                <!-- 3:45 -->
                {{formatDuration(item.duration)}}
              </view>
            </view>
          </view>
          <view class="right">
            <image class="img"
              :src="index === playIndexShow ? '/static/images/play-blue.png' : '/static/svg/play-black.svg'" mode="widthFix"
              @click.native.stop="doPlay(index)"></image>

            <view class="add flex-center-center" @click.native.stop="doAddPlay(index)">
              <uni-icons type="plusempty" size="20" color="rgba(0,0,0, 0.4)"></uni-icons>
            </view>
          </view>
        </view>
      </view>
      <view class="empty-box" v-if="detail.patterns.length == 0">
        <view class="m-t-40">
          <view class="empty-img">
            <image class="img-100" src="/static/svg/empty.svg" mode="widthFix"></image>
          </view>
          <view class="empty-text">
            {{ $t('grid.empty') }}
          </view>
          <!-- <view class="btn col-fff font-14 font-500 flex-center-center m-t-40" @click="clickRight">
            {{ $t('manage.create') }}
          </view> -->
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="bottom" border-radius="16px 16px 0 0">
      <view class="pop-box pad-20" v-if="patternsDetail">
        <view class="flex flex-between flex-center">
          <view class="col-000-8 font-18 font-600">
            <!-- 图案详情 -->
            {{ $t('grid.patternDetails') }}
          </view>
          <view class="close" @click="closePopup">
            <uni-icons type="closeempty" color="rgba(0,0,0,0.4)" size="20"></uni-icons>
          </view>
        </view>
        <view class="img-box flex-center-center">
          <image class="img" :src="patternsDetail.preview_image" mode="widthFix"></image>
          <view class="collect" @click="doCollect">
            <uni-icons :type="isCollect ? 'star-filled' : 'star'" :color="isCollect ? '#FABD18' : '#666'"
              size="26"></uni-icons>
            <!-- <uni-icons type="star-filled" color="#fff" size="20"></uni-icons> -->
          </view>
        </view>
        <view class="col-000-8 font-24 font-600 text-center" style="margin-top: 48rpx;">
          {{patternsDetail.pattern_name}}
        </view>
        <view class="btn-box popup-btn-box">
          <view class="right shadow flex-center-center" @click="playAdd()">
            <uni-icons color="#fff" type="plusempty" size="20"></uni-icons>
          </view>
          <view class="center left flex-center-center" @click="playAll">
            <image class="img" src="/static/svg/play.svg" mode="widthFix"></image>
            <view class="col-fff font-14 font-500">
              <!-- 立即播放 -->
              {{ $t('grid.playNow') }}

            </view>
          </view>
          <view class="right shadow flex-center-center" @click="playAdd()">
            <image class="next" src="/static/svg/next.svg" mode=""></image>
          </view>
        </view>
      </view>
    </uni-popup>
    <!-- 立即播放全部 -->
    <selectDevice ref="ref_select_device" @choose="chooseDevice" />
    <!-- 添加到全部 -->
    <selectDevice ref="ref_select_device_add" @choose="chooseDeviceAdd" />
    <!-- 立即播放一首 -->
    <selectDevice ref="ref_select_device_add_one" @choose="chooseDeviceAddOne" />
     <!-- 添加一首到播放列表 -->
    <selectDevice ref="ref_select_device_add_one_last" @choose="chooseDeviceAddOneLast" />

		<selectCollect ref="ref_select_collect" />
  </view>
</template>

<script>
import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue';
import selectDevice from '@/components/select-device/index.vue'
import selectCollect from '@/components/select-collect/index.vue'
import featuredPlaylistApi from "@/api/featured-playlist.js"
import playlistApi from '@/api/playlist';
import collectionApi from '@/api/collection';
export default {
  data() {
    return {
      isCollect: false,
      collectIds: [], //收藏id数组
      playIndex: -1,
      playIndexShow: -1,
			detail: {
				patterns: [],
				playlist: {
					title: ''
				}
			},
      patternsDetail: null
    }
  },
  components: {
    uniNavBar, // 添加组件注册
    selectDevice,
		selectCollect
  },
  onLoad(option) {
    const id = option?.playlist_id || '';
    if(!id) {
				uni.showToast({
					title: this.$t('ParameterError'),
					icon: 'none',
					duration: 3000
				});
				return;
			}
    if(id) {
      this.getDetail(id);
    }
  },

  created() {
    // created 钩子中不再获取参数
  },

  methods: {
    // 添加时长格式化方法
    formatDuration(seconds) {
      if (!seconds || seconds <= 0) return '0:00';
      
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = Math.floor(seconds % 60);
      
      // 确保秒数始终显示两位数
      const formattedSeconds = remainingSeconds < 10 ? `0${remainingSeconds}` : remainingSeconds;
      
      return `${minutes}:${formattedSeconds}`;
    },
    getDetail(id) {
        featuredPlaylistApi.getFeaturedPlaylistDetail({
          playlist_id: id
        }).then(res => {
          if (res.errCode === 0) {
						Object.assign(this.detail, res.data); // 合并赋值
          }
        })

    },
    doCollect() {
      // this.isCollect = !this.isCollect;
			this.$refs.ref_select_collect.open(this.patternsDetail.id, this.collectIds)
    },
    doDetail(item) {
      console.log('detail', item)
      this.patternsDetail = item;
      this.$refs.popup.open()

			// 根据id获取是否收藏
      collectionApi.getCollectionsByPattern({
        pattern_id: item.id
      }).then(res => {
        if (res.errCode === 0) {
          this.isCollect = res.data.length > 0 ? true : false;
          this.collectIds = res.data.map(item => item.id)
        }
      })

      
    },
    closePopup() {
      this.patternsDetail = null;
      this.$refs.popup.close()
    },
		chooseDevice(sns) {
			let patternIds = this.detail.patterns.map(item => item.id)
			let params = {
				deviceSn: sns.length == 1 ? sns[0] : sns,
				patternIds: patternIds
			}
			playlistApi.playNow(params).then(res => {
				if(res.errCode === 0) {
					uni.showToast({
					  title: this.$t('grid.playAll'),
					  icon: 'none',
					  duration: 3000
					});
          this.$refs.ref_select_device.closePopup()
				}
			})
		},
    chooseDeviceAdd(sns) {
      let patternIds = this.detail.patterns.map(item => item.id)
      let params = {
        deviceSn: sns.length == 1 ? sns[0] : sns,
        patternIds: patternIds
      }
      playlistApi.batchAddPatternsToEnd(params).then(res => {
        if(res.errCode === 0) {
          uni.showToast({
            title: this.$t('grid.playAdd'),
            icon: 'none',
            duration: 3000
          });
          this.$refs.ref_select_device_add.closePopup()

        }
      })
    },
    chooseDeviceAddOne(sns) {
      let params = {
        deviceSn: sns.length == 1 ? sns[0] : sns,
        patternId: this.detail.patterns[this.playIndex].id,
        sortOrder: 1, //立即播放
      }
      playlistApi.addPattern(params).then(res => {
        if(res.errCode === 0) {
          this.playIndexShow = this.playIndex;
          uni.showToast({
            title: this.$t('grid.playAdd'),
            icon: 'none',
            duration: 3000
          });
          this.$refs.ref_select_device_add_one.closePopup()
        }
      })
    },
    chooseDeviceAddOneLast(sns) {
      let params = {
        deviceSn: sns.length == 1 ? sns[0] : sns,
        patternId: this.detail.patterns[this.playIndex].id,
      }
      playlistApi.addPattern(params).then(res => {
        if(res.errCode === 0) {
          uni.showToast({
            title: this.$t('grid.playAdd'),
            icon: 'none',
            duration: 3000
          });
          this.$refs.ref_select_device_add_one_last.closePopup()

        }
      })
    },
    playAll() {
			this.$refs.ref_select_device.open()
    },
    playAdd() {
      this.$refs.ref_select_device_add.open()
    },
    doPlay(index) {
      this.playIndex = index;
      this.$refs.ref_select_device_add_one.open(index)
    },
    doAddPlay(index) {
      this.playIndex = index
      this.$refs.ref_select_device_add_one_last.open()
    },
    clickLeft() {
      console.log('left')
      uni.navigateBack()
    },
    clickRight() {
      console.log('12')
    }
  },

}
</script>

<style lang="scss" scoped>
@import './common.scss';

.empty-box {
  .btn {
    width: 670rpx;
    height: 100rpx;
    background: #000000;
    border-radius: 16rpx;
  }
}

.list-box {
  width: 100%;
  margin-top: 40rpx;

  .item {
    margin-bottom: 16rpx;
    padding: 32rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

    .left {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .img {
        width: 76rpx;
        height: 76rpx;
        margin-right: 32rpx;
        border-radius: 4rpx;
        overflow: hidden;
        min-width: 76rpx;
      }
    }

    .right {
      display: flex;
      align-items: center;
      justify-content: flex-start;

      .img {
        width: 56rpx;
        height: 56rpx;
        margin-right: 36rpx;
      }

      .add {
        width: 56rpx;
        height: 56rpx;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 100%;
      }
    }
  }
}

.hot-play-detail-box {}

.title-box {
  width: 100%;
  margin-top: 160rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 40rpx;

  .right-img {
    width: 88rpx;
    height: 88rpx;
  }
}
</style>